<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="assets/mui/css/mui.min.css">
    <link rel="stylesheet" href="assets/fontAwesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/base.css">
    <script src="assets/zepto/zepto.min.js"></script>
    <script src="assets/mui/js/mui.js"></script>
    <script src="./js/common.js"></script>
    <style>
        .list {
            margin-top: 0px;
        }

        .logout {
            text-align: center;
        }

        li {
            border-bottom: 1px solid #ccc;
        }

        .mui-table-view-cell:after {
            height: 0;
        }

    </style>
</head>

<body>
    <header class="mui-bar mui-bar-nav header">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.back(-1)"></a>
        <h1 class="mui-title">收货地址管理</h1>
        <a class="mui-icon mui-icon-search mui-pull-right"></a>

    </header>
    <nav class="mui-bar mui-bar-tab footer">
        <a class="mui-tab-item mui-active" href="index.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="category.html">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" href="cart.html">
            <span class="mui-icon fa fa-shopping-cart"></span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item  mui-active" href="user.html">
            <span class="mui-icon mui-icon-person"></span>
            <span class="mui-tab-label">会员中心</span>
        </a>
    </nav>
    <div class="mui-content">

        <ul class="mui-table-view list">
            <li class="mui-table-view-cell">
                <a href="addadd.html?idAdd=1">添加收货地址</a>
            </li>
            <!-- <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <div class="mui-media-body mui-navigate-right">
                        邮编：100010 收货人：孙悟空
                        <p class='mui-ellipsis'>北京市。。。。</p>
                    </div>
                </a>
            </li> -->
        </ul>
        <ul class="lists">

        </ul>
    </div>
</body>
<script src="./assets/artTemplate/template-web.js"></script>
<script type="text/template" id="user">
    {{each $data value index}}
<li class="mui-table-view-cell mui-media" data-id="{{value.id}}" data-value="{{value}}">
    <a href="javascript:;">
    <div class="mui-slider-right mui-disabled">
        <a href="#" class="mui-btn mui-btn-blue edit">编辑</a>
        <a href="javascript:;" class="mui-btn mui-btn-red delete">删除</a>
    </div>
    <div class="mui-media-body mui-navigate-right mui-slider-handle">
            邮编：{{value.postCode}} 收货人：{{value.recipients}}
            <p class='mui-ellipsis'>{{value.address}}{{value.addressDetail}}</p>
        </div>
    </a>
</li>
{{/each}}
</script>
<script>
    function getAdd() {
        $.ajax({
            url: '/address/queryAddress',
            type: "GET",
            success: function (res) {
                console.log(res)
                if (res.length == 0) {
                    $('.lists').append('<p>暂无数据</p>')
                } else {
                    console.log(1)
                    var html = template('user', res)
                    $('.lists').html(html)
                }
            }
        })
    }
    getAdd()
    // 删除操作
    $('.lists').on('tap', '.delete', function () {
        console.log($(this).parent().parent())
        // li的节点
        var li = $(this).parent().parent()
        mui.confirm('亲，您确定要删除么', function (pa) {
            console.log(pa)
            // 确认删除
            if (pa.index == 1) {
                $.ajax({
                    url: '/address/deleteAddress',
                    type: 'POST',
                    data: {
                        id: li.data('id')
                    },
                    success: function (res) {
                        console.log(res)
                        mui.toast('删除成功')
                        getAdd()
                    }
                })
            }
            // 取消删除
            else {
                mui.swipeoutClose(li[0])
            }
        })
    })
    // 编辑操作
    $('.lists').on('tap', '.edit', function () {
        var li = $(this).parent().parent()
        console.log(li.data('value'))
        localStorage.edit = JSON.stringify(li.data('value'))
        window.location.href = "addadd.html?isAdd=0"
    })

</script>

</html>
